<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="10">
            <Col :md="24" :lg="8">
            <Row class-name="home-page-row1" :gutter="10">
                <Col :style="{marginBottom: '10px'}">
                <Card>
                    <Row type="flex" class="user-infor">
                        <Col span="8">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <img class="avator-img" :src="avatorPath" />
                        </Row>
                        </Col>
                        <Col span="16" style="padding-left:6px;">
                        <Row class-name="made-child-con-middle" type="flex" align="middle">
                            <div>
                                <b class="card-user-infor-name">{{baseuser.name}}</b>
                                <p>{{baseuser.phone}}</p>
                            </div>
                        </Row>
                        </Col>
                    </Row>
                </Card>
                </Col>
            </Row>
            </Col>
            <Col :md="24" :lg="16">
            <Row :gutter="5">
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="student_count"
                        :end-val="count.student"
                        iconType="android-person"
                        color="#2d8cf0"
                        intro-text="学生数量"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="class_count"
                        :end-val="count.class"
                        iconType="trophy"
                        color="#64d572"
                        :iconSize="50"
                        intro-text="班级数量"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="enroll_count"
                        :end-val="count.enroll"
                        iconType="image"
                        color="#ffd572"
                        intro-text="报名数量"
                ></infor-card>
                </Col>
                <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
                <infor-card
                        id-name="payment_count"
                        :end-val="count.payment"
                        iconType="document"
                        color="#f25e43"
                        intro-text="缴费数量"
                ></infor-card>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row :gutter="10" class="margin-top-10">
            <Col :md="24" :lg="12" :style="{marginBottom: '10px'}">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    学生报名专业分析
                </p>
                <div class="data-source-row">
                    <visite-volume></visite-volume>
                </div>
            </Card>
            </Col>
            <Col :md="24" :lg="12" :style="{marginBottom: '10px'}">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-pulse-strong"></Icon>
                    学生年龄段统计
                </p>
                <div class="data-source-row">
                    <data-source-pie></data-source-pie>
                </div>
            </Card>
            </Col>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="ios-shuffle-strong"></Icon>
                    七日内报名缴费情况
                </p>
                <div class="line-chart-con">
                    <service-requests></service-requests>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
    import homeMap from './components/map.vue';
    import dataSourcePie from './components/dataSourcePie.vue';
    import visiteVolume from './components/visiteVolume.vue';
    import serviceRequests from './components/serviceRequests.vue';
    import userFlow from './components/userFlow.vue';
    import inforCard from './components/inforCard.vue';
    import mapDataTable from './components/mapDataTable.vue';
    import toDoListItem from './components/toDoListItem.vue';

    import util from '@/libs/util';
    import Cookies from 'js-cookie';

    export default {
        name: 'home',
        components: {
            homeMap,
            dataSourcePie,
            visiteVolume,
            serviceRequests,
            userFlow,
            inforCard,
            mapDataTable,
            toDoListItem
        },
        data () {
            return {
                baseuser: JSON.parse(Cookies.get('baseUser')),
                count: {
                    class: 0,
                    student: 0,
                    enroll: 0,
                    payment: 0
                }
            };
        },
        computed: {
            avatorPath () {
                return localStorage.avatorImgPath;
            }
        },
        mounted () {
            this.loadClasses();
            this.loadStudent();
            this.loadEnroll();
            this.loadPayment();
        },
        methods: {
            loadClasses () {
                util.ajax.post('/base/class/count', util.toFormData({
                    orgId: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
                })).then(res => {
                    this.count.class = res.data.data.length;
                });
            },
            loadStudent () {
                util.ajax.post('/busine/student/count', util.toFormData({
                    orgId: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
                })).then(res => {
                    this.count.student = res.data.data.length;
                });
            },
            loadEnroll () {
                util.ajax.post('/busine/bill/count', util.toFormData({
                    orgId: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
                })).then(res => {
                    this.count.enroll = res.data.data.length;
                });
            },
            loadPayment () {
                util.ajax.post('/busine/bill/findCount', util.toFormData({
                    orgId: (this.baseuser.type === 2 ? this.baseuser.orgId : '')
                })).then(res => {
                    this.count.payment = res.data.data.length;
                });
            }
        }
    };
</script>
